<template>
    <div>
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="全部收支明细">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form>
            <el-container>
                <el-form-item>
                    <el-cascader placeholder="请选择收入类型" clearable
                                 v-model="params.id"
                                 :options="IncomeType"
                                 :props="{ expandTrigger: 'hover' ,checkStrictly:true,emitPath:true }"
                                 @change="handleChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-select v-model="params.cw_pay_type" clearable placeholder="请选择支付方式">
                        <el-option
                                v-for="item in payOption"
                                :key="item.cWPayType"
                                :label="item.payType"
                                :value="item.cWPayType">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-date-picker
                            v-model="params.starttime"
                            type="date"
                            placeholder="开始日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-date-picker
                            v-model="params.endtime"
                            type="date"
                            placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-button type="primary" @click="List()" icon="el-icon-search">检索</el-button>
                </el-form-item>
            </el-container>
        </el-form>
        <el-table
                :data="inoutType.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                border
                style="width: 100%;font-size: 18px;">
            <el-table-column
                    prop="cwid"
                    v-if="false">
            </el-table-column>
            <el-table-column
                    prop="cw_name"
                    label="收支类别">
            </el-table-column>
            <el-table-column
                    prop="cw_inout_date"
                    label="发生日期">
            </el-table-column>
            <el-table-column
                    prop="cw_inout_money"
                    label="收入">
            </el-table-column>
            <el-table-column
                    prop="cw_pay_type"
                    label="支付方式">
            </el-table-column>
            <el-table-column
                    prop="cw_inout_person"
                    label="收支人">
            </el-table-column>
            <el-table-column
                    prop="cw_payer"
                    label="付款人">
            </el-table-column>
            <el-table-column
                    prop="cw_remark"
                    label="备注">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button  type="danger" icon="el-icon-delete" @click="delIncome(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="inoutType.length"> //这是显示总共有多少数据，
        </el-pagination>
    </div>
</template>

<script>
    import CwinoutService from "../../../model/ww/cw_inout/CwInoutService"
    import CwInoutTypeService from '../../../model/ww/cw_inout_type/CwInoutTypeService'

    const cwinoutService = CwinoutService.getInstance();
    const cwInoutTypeService = CwInoutTypeService.getInstance();
    export default {
        name: "AllIncome",
        data(){
            return {
                params:{},
                payOption:[
                    {
                        cWPayType:'1',
                        payType:'网银'
                    },
                    {
                        cWPayType:'2',
                        payType:'银行卡'
                    },
                    {
                        cWPayType:'3',
                        payType:'支付宝'
                    },
                    {
                        cWPayType:'4',
                        payType:'微信'
                    },
                    {
                        cWPayType:'5',
                        payType:'其他'
                    }
                ],
                IncomeType:[],//收支类型下拉框
                inoutType:[],//表格数据
                currentPage: 1, //初始页
                pagesize: 5,  //每页的数据
            }
        },
        methods:{
            List(){
                cwinoutService.allIncome(this.params).then((response)=>{
                    this.inoutType=response.data.data
                })
            },
            handleChange(ids){//收入类型下拉框改变事件
                if(ids.length==3){
                    this.params.id=ids[ids.length-1]
                }
                if(ids.length==2){
                    this.params.id=ids[ids.length-1]
                }
                if(ids.length==1){
                    this.params.id=ids[ids.length-1]
                }

            },
            handleSizeChange(size) {
                this.pagesize = size; //每页下拉显示数据

            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage; //点击第几页

            },
            selects() { //查询收入类型
                cwInoutTypeService.list().then((response) => {
                    this.IncomeType = response.data.data

                })
            },
            delIncome(row){//删除选中的收入
                cwinoutService.del(row.cwid).then(()=>{
                    this.List()//删完了刷新表格
                })
            },
            goBack(){
                history.back()
            }
        },
        created(){
            this.selects();//进来渲染下拉框
            this.List()//查询表格
        }
    }
</script>

<style scoped>

</style>
